<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->

    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script>
    <![endif]-->
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
</head>

<body>
    <!--HTML-->
    <div id="charts_bar_demo" style="height:150px;padding:150px;width: 150px;"></div>
    <!--JS-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>

    <script type="text/javascript">
        //charts_bar_demo_js_start
        function createKendoBarChart(conf) {
            // 创建图表
            $(conf.selector).kendoChart({
                legend: {
                    position: "bottom"
                },
                theme: 'bootstrap',
                categoryAxis: {
                    majorGridLines: {
                        visible: false
                    },
                    categories: conf.data.categories
                },
                seriesDefaults: {
                    type: conf.type
                },
                series: conf.data.series,
                valueAxis: {
                    max: 200,
                    line: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    },
                    labels: {
                        rotation: "auto"
                    }
                },
                tooltip: {
                    visible: true,
                    template: "#= series.name # #= value #"
                }
            });
        }
        function initKendoBarChart(conf) {
            $.ajax({
                url: conf.url,
                type: 'GET',
                dataType: conf.dataType,
                success: function (res) {
                    //获取数据成功
                    if (res.result) {
                        var data = res.data;
                        createKendoBarChart({
                            selector: conf.containerId, // 图表容器
                            type: "column", // 图表类型
                            data: data, // 图表数据
                        });
                    }
                }
            })
        }
        $(function () {
            initKendoBarChart({
                url: 'https://magicbox.bk.tencent.com/static_api/v3/components/charts_bar/demo.json',
                dataType: 'json',
                containerId: '#charts_bar_demo'
            });
        });

//charts_bar_demo_js_end
    </script>

</body>

</html>